<template>
  <!-- 分类 -->
  <div class="inventoryBox">
    <!-- 标题 -->
    <x-header :left-options="{showBack: true,backText:''}" class="headerBox">
      <img src="../assets/images/tittle.png" alt class="headerTitleImg" />
    </x-header>
    <div class="titleTab flex" :class="fixedHead?'active':''" ref="tabBox">
      <div
        v-for="(item,index) in tabList"
        class="tabItem"
        :class="tabIndex==index?'active':''"
        @click="tabClick(index)"
      >
        <img :src="item.img" alt />
        <div>{{item.title}}</div>
      </div>
    </div>
    <div class="content">
      <div v-for="(item,index) in goodsList" :key="index" class="goodsList">
        <div class="goodsTitle">{{item.title}}</div>
        <div class="flex">
          <router-link
            :to="item.link"
            v-for="(item2,index2) in item.innerList"
            :key="index2"
            class="goodsItem"
          >
            <img :src="item2.img" alt />
            <div v-if="item2.ticket" class="ticket">领券{{item2.ticket}}元</div>
            <div class="price">￥{{item2.price}}</div>
          </router-link>
        </div>
      </div>
    </div>
    <tabBar></tabBar>
  </div>
</template>

<script>
import { XHeader } from "vux";
import TabBar from "@/components/tabBar";
export default {
  components: {
    XHeader,
    TabBar
  },
  data() {
    return {
      fixedHead: false,
      tabIndex: 0,
      tabList: [
        {
          img: require('../assets/images/155117928298268957.png'),
          title: '精选'
        },
        {
          img: require('../assets/images/155117929720977273.png'),
          title: '家电'
        },
        {
          img: require('../assets/images/151384323374513944.png'),
          title: '酷机'
        },
        {
          img: require('../assets/images/151375579188137688.png'),
          title: '超市'
        },
        {
          img: require('../assets/images/151375580058931338.png'),
          title: '穿搭'
        },
        {
          img: require('../assets/images/151383933612448185.png'),
          title: '置家'
        },
        {
          img: require('../assets/images/151375578418753424.png'),
          title: '育儿'
        },
      ],
      goodsList: [
        {
          title: '缓解眼袋，眼霜让你神采奕奕',
          link: '',
          innerList: [
            {
              img: require('../assets/images/157744902167793727.jpg'),
              ticket: '30',
              price: '33.9',
            },
            {
              img: require('../assets/images/157744972944328263.jpg'),
              ticket: '50',
              price: '33.9',
            },
            {
              img: require('../assets/images/157744902797397645.jpg'),
              ticket: '300',
              price: '33.9',
            }
          ]
        },
        {
          title: '缓解眼袋，眼霜让你神采奕奕',
          link: '',
          innerList: [
            {
              img: require('../assets/images/157744972944328263.jpg'),
              price: '33.9',
            },
            {
              img: require('../assets/images/157744902797397645.jpg'),
              price: '33.9',
            },
            {
              img: require('../assets/images/157744902167793727.jpg'),
              price: '33.9',
            },

          ]
        },
        {
          title: '缓解眼袋，眼霜让你神采奕奕',
          link: '',
          innerList: [
            {
              img: require('../assets/images/157744902167793727.jpg'),
              ticket: '30',
              price: '33.9',
            },
            {
              img: require('../assets/images/157744972944328263.jpg'),
              ticket: '50',
              price: '33.9',
            },
            {
              img: require('../assets/images/157744902797397645.jpg'),
              ticket: '300',
              price: '33.9',
            }
          ]
        },
        {
          title: '缓解眼袋，眼霜让你神采奕奕',
          link: '',
          innerList: [
            {
              img: require('../assets/images/157744972944328263.jpg'),
              price: '33.9',
            },
            {
              img: require('../assets/images/157744902797397645.jpg'),
              price: '33.9',
            },
            {
              img: require('../assets/images/157744902167793727.jpg'),
              price: '33.9',
            },

          ]
        },
        {
          title: '缓解眼袋，眼霜让你神采奕奕',
          link: '',
          innerList: [
            {
              img: require('../assets/images/157744902167793727.jpg'),
              ticket: '30',
              price: '33.9',
            },
            {
              img: require('../assets/images/157744972944328263.jpg'),
              ticket: '50',
              price: '33.9',
            },
            {
              img: require('../assets/images/157744902797397645.jpg'),
              ticket: '300',
              price: '33.9',
            }
          ]
        },
        {
          title: '缓解眼袋，眼霜让你神采奕奕',
          link: '',
          innerList: [
            {
              img: require('../assets/images/157744972944328263.jpg'),
              price: '33.9',
            },
            {
              img: require('../assets/images/157744902797397645.jpg'),
              price: '33.9',
            },
            {
              img: require('../assets/images/157744902167793727.jpg'),
              price: '33.9',
            },

          ]
        },
      ]
    }
  },

  mounted() {
    document.querySelector('body').setAttribute('style', 'background-color:#fff')
    document.addEventListener('scroll', (e) => {
      let Wheight = window.screen.height
      let top = e.srcElement.scrollingElement.scrollTop;    // 获取页面滚动高度
      if (Wheight - top <= 500) {
        this.fixedHead = true
      }
    })
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },
  methods: {
    tabClick(index) {
      this.tabIndex = index
      if (index >= 3) {
        this.$nextTick(() => {
          this.$refs.tabBox.scrollLeft += 80
          console.log(this.$refs.tabBox)
        })
      } else {
        this.$nextTick(() => {
          this.$refs.tabBox.scrollLeft -= 80
        })
      }
    }
  },
}
</script>

<style lang="less" scoped>
.inventoryBox {
  padding-bottom: 100px;
  font-size: 24px;
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
      margin: 0 80px;
    }
    .vux-header-right {
      color: #000;
    }
    .headerTitleImg {
      width: 180px;
      margin-top: 20px;
    }
  }
  .titleTab {
    width: 100%;
    overflow: auto;
    background: #ff342d;
    z-index: 9;
    &::-webkit-scrollbar {
      display: none;
    }
    .tabItem {
      width: 20%;
      flex-shrink: 0;
      padding: 10px 0;
      text-align: center;
      img {
        width: 60px;
      }
      div {
        color: #fff;
        font-size: 28px;
      }
    }
    .tabItem.active {
      background-color: #cd0031;
    }
  }
  .titleTab.active {
    position: sticky;
    top: 0;
  }
  .content {
    padding: 20px;
    .goodsList {
      box-shadow: 0 0 20px #eee;
      border-radius: 20px;
      margin-bottom: 20px;
      padding: 20px;
      .goodsTitle {
        font-size: 32px;
        font-weight: bold;
      }
      .goodsItem {
        width: 32%;
        margin: 5px;
        text-align: center;
        color: currentColor;
        img {
          width: 200px;
          height: 200px;
          margin: 0 auto;
        }
        .ticket {
          border: 2px solid #ff2a57;
          background: #ffedef;
          max-width: 4.6rem;
          position: relative;
          margin: 0 auto;
          height: auto;
          font-size: x-small;
          line-height: 0.56rem;
          border-radius: 2px;
          color: #fe053a;
          display: table;
          padding: 0 10px;
        }
        .price {
          font-size: 30px;
          color: rgb(133, 133, 133);
        }
      }
    }
  }
}
</style>